<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{padding: 0;margin: 0;list-style: none;}
		#menu1{
			position: absolute;
			width: 100px;
			height: 200px;
			line-height: 40px;
			background: #ccc;
			border: 1px #000 solid;
			display: none;
		}
	</style>
</head>
<body>
	<ul id="menu1">
		<li>aaa</li>
		<li>bbb</li>
		<li>ccc</li>
		<li>ddd</li>
		<li>eee</li>
	</ul>
	<script>
		var menu = document.getElementById("menu1");//获取节点，全局变量
		document.oncontextmenu = function(e){
			var oEvent = e||event;//处理兼容问题
			menu.style.display = "block";//让ul显示出来
			menu.style.left = oEvent.clientX+"px";//ul离左边的距离就是鼠标的横坐标，要加“px”
			menu.style.top = oEvent.clientY+"px";
			// ul离左边的距离就是鼠标的纵坐标，要加“px”
			return false;//阻止默认行为，return这行必须放在最后
		}
		
		document.onclick = function(){
			menu.style.display = "none";
		}
	</script>
</body>
</html>